<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
  </head>

  <body style="padding: 15px">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">图书表格</h3>
      </div>
      <div class="panel-body form-inline">
        <form id="bookForm">
          <div class="input-group">
            <div class="input-group-addon">书名</div>
            <input
              type="text"
              class="form-control"
              name="bookname"
              placeholder="请输入书名"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">作者</div>
            <input
              type="text"
              class="form-control"
              name="author"
              placeholder="请输入作者"
            />
          </div>
          <div class="input-group">
            <div class="input-group-addon">出版社</div>
            <input
              type="text"
              class="form-control"
              name="publisher"
              placeholder="请输入出版社"
            />
          </div>
          <button id="btnAdd" class="btn btn-primary">添加</button>
        </div>
      </form>
    </div>

    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>id</th>
          <th>书名</th>
          <th>作者</th>
          <th>出版社</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tb">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
        </tr>
      </tbody>
    </table>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <!-- <script src="./js/index.js"></script> -->

    <script>
      // 获取元素
      const tbady = document.querySelector('#tb');

      const form = document.querySelector('#bookForm');


      // 封装渲染函数

      const redering = function(){

        const add = serialize(form,{hash:true})

        axios({
          url:'http://ajax-base-api-t.itheima.net/api/getbooks',
          method:'GET',
          patams:add
        }).then(({data:res})=>{
          // console.log(res);
          const {data} = res
          let html = ``
          data.forEach(item=>{
            const {id,bookname,author,publisher} = item
            // console.log(item);
            html += `
            <tr>
              <td>${id}</td>
              <td>${bookname}</td>
              <td>${author}</td>
              <td>${publisher}</td>
              <td data-id='${id}'>删除</td>
            </tr>
            `
          })
          tbady.innerHTML = html
        })

      }
      redering()


      // 增加
      form.addEventListener('submit',function(e){
        e.preventDefault() 
        const add = serialize(this,{hash:true})

        axios({
          url:'http://ajax-base-api-t.itheima.net/api/addbook',
          method:'POST',
          data:add
        }).then(({data:res})=>{
          // console.log(res);
          alert('添加成功')
          redering()
        })
      })


      // 删除

      tbady.addEventListener('click',function(e){
        
        // console.log(e.target.dataset.id);

        const id = e.target.dataset.id

        axios({
          url:'http://ajax-base-api-t.itheima.net/api/delbook',
          method:'GET',
          params:{
            id
          }
        }).then(({data:res})=>{
          // console.log(res);
          alert('删除成功')
          redering()
        })
        
        
        
      })


    </script>
  </body>
</html>
